<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";
import resize from "./mixins/resize";
import { getLiterData } from "@/api/chart";
import { notify } from "@/utils/message";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "200px",
    },
    height: {
      type: String,
      default: "200px",
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id));
      getLiterData()
        .then((res) => {
          console.log(res.data.data);
          notify(1, "获取图书类型的价格分布数据");
          this.chart.setOption({
            legend: {
              orient: "vertical",
              left: "left",
            },
            title: {
              text: "图书类型的最高价格分布",
              left: "center",
            },
            toolbox: {
              show: true,
              feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true },
              },
            },
            series: [
              {
                name: "Nightingale Chart",
                type: "pie",
                radius: [50, 250],
                center: ["50%", "50%"],
                roseType: "area",
                itemStyle: {
                  borderRadius: 8,
                },

                label: {
                  show: true,
                  formatter: "{b}: {c}元",
                  position: "outside",
                  borderRadius: 3,
                  padding: [3, 5],
                  textStyle: {
                    fontSize: 12,
                  },
                },
                data: res.data.data,
              },
            ],
          });
        })
        .catch((err) => {
          notify(2, "获取图书类型的价格分布数据", err);
        });
    },
  },
};
</script>
